<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bootstrap 中文文档</title>
	<link rel="shortcut icon" href="img/favicon.ico">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap.css">
</head>

<body data-spy="scroll" data-target="#side">
	<nav class="navbar navbar-default">
		<div class="container container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Bootstrap</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="#">起步</a></li>
					<li><a href="#">全局 CSS 样式</a></li>
					<li><a href="#">组件</a></li>
					<li><a href="#">JavaScript插件</a></li>
					<li><a href="#">定制</a></li>
					<li><a class="reddot" href="#">网站实例</a></li>
					<li><a href="#">Jekyll</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Bootstrap中文网</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div id="content">
		<div class="container">
			<h1>全局 CSS 样式</h1>
			<p>设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。</p>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-9">
				<div class="section">
					<h1 id="overview" class="page-header">概览</h1>
					<p class="lead">深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。</p>
					<h2 id="overview-doctype">HTML5 文档类型</h2>
					<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
					<figure class="tb clearfix">
						<pre>
							<code><span class="cp">&lt;!DOCTYPE html&gt;</span>
							<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"zh-CN"</span><span class="nt">&gt;</span>
							<span class="d">...</span>
							<span class="nt">&lt;/html&gt;</span>
						</code>
						</pre>
					</figure>
					<div class="try-online"><a class="btn-try btn btn-success btn-lg disabled"></a></div>
					<h2 id="overview-mobile">移动设备优先</h2>
					<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3
						中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，<strong>Bootstrap
							是移动设备优先的</strong>。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
					<p>为了确保适当的绘制和触屏缩放，需要在 <code>&lt;head&gt;</code> 之中<strong>添加 viewport 元数据标签</strong>。</p>
					<figure class="tb">
						<pre>
							<code><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span>
						</code>
						</pre>
					</figure>
					<p>在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 <code>user-scalable=no</code>
						可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！</p>
					<figure class="tb">
						<pre>
							<code><span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"</span><span class="nt">&gt;</span>
						</code>
						</pre>
					</figure>
					<h2 id="overview-type-links">排版与链接</h2>
					<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是：</p>
					<ul>
						<li>为 <code>body</code> 元素设置 <code>background-color:#fff;</code> </li>
						<li>使用 <code>@font-family-base</code> 、 <code>@font-size-base</code> 和
							<code>@line-height-base</code> 变量作为排版的基本参数</li>
						<li>为所有链接设置了基本颜色 <code>@link-color</code> ，并且当链接处于 <code>:hover</code> 状态时才添加下划线</li>
					</ul>
					<p>这些样式都能在<code>scaffolding.less</code>文件中找到对应的源码。</p>
					<h2 id="overview-normalize">Normalize.css</h2>
					<p>为了增强跨浏览器表现的一致性，我们使用了<a href="">Normalize.css</a>，这是由<a href="">Nicolas Gallagher</a>和<a
							href="">Jonathan Neal</a>维护的一个CSS 重置样式库。</p>
					<h2 id="overview-container">布局容器</h2>
					<p>Bootstrap 需要为页面内容和栅格系统包裹一个 <code>.container</code> 容器。我们提供了两个作此用处的类。注意，由于 <code>padding</code>
						等属性的原因，这两种 容器类不能互相嵌套。</p>
					<p><code>.container</code> 类用于固定宽度并支持响应式布局的容器。</p>
					<figure class="tb">
						<pre>
							<code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>
								<span class="d">...</span>
								<span>&lt;/div&gt;</span>
							</code>
						 </pre>
					</figure>
					<p><code>.container-fluid</code> 类用于 100% 宽度，占据全部视口（viewport）的容器。</p>
					<figure class="tb">
						<pre>
							<code><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">&gt;</span>
								<span class="d">...</span>
								<span>&lt;/div&gt;</span>
							</code>
						 </pre>
					</figure>
					<div class="section">
						<h1 id="grid" class="page-header">栅格系统</h1>
						<p class="lead">Bootstrap
							提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的<a>预定义类</a>，还有强大的<a>mixin
								用于生成更具语义的布局</a>。</p>
						<h2 id="grid-intro">简介</h2>
						<p>栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：</p>
						<ul>
							<li>“行（row）”必须包含在 <code>.container</code> （固定宽度）或 <code>.container-fluid</code> （100%
								宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。</li>
							<li>通过“行（row）”在水平方向创建一组“列（column）”。</li>
							<li>你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。</li>
							<li>类似 <code>.row</code> 和 <code>.col-xs-4</code> 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的
								mixin 也可以用来创建语义化的布局。</li>
							<li>通过为“列（column）”设置 <code>padding</code> 属性，从而创建列与列之间的间隔（gutter）。通过为 <code>.row</code>
								元素设置负值 <code>margin</code> 从而抵消掉为 <code>.container</code> 元素设置的
								<code>padding</code>，也就间接为“行（row）”所包含的“列（column）”抵消掉了<code>padding</code>。</li>
							<li>负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。</li>
							<li>栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 <code>.col-xs-4</code> 来创建。</li>
							<li>如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。</li>
							<li>栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-md-*</code>
								栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 <code>.col-lg-*</code> 不存在，
								也影响大屏幕设备。</li>
						</ul>
						<h2 id="grid-media-queries">媒体查询</h2>
						<p>通过研究后面的实例，可以将这些原理应用到你的代码中。</p>
						<figure class="tb">
							<pre><code class="language-scss" data-lang="scss"><span class="cm">/* 超小屏幕（手机，小于 768px） */</span>
							<span class="cm">/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */</span>
							
							<span class="cm">/* 小屏幕（平板，大于等于 768px） */</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-sm-min</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
							
							<span class="cm">/* 中等屏幕（桌面显示器，大于等于 992px） */</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-md-min</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
							
							<span class="cm">/* 大屏幕（大桌面显示器，大于等于 1200px） */</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-lg-min</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre>
						</figure>
						<p>我们偶尔也会在媒体查询代码中包含 <code>max-width</code> 从而将 CSS 的影响限制在更小范围的屏幕大小之内。</p>
						<figure class="tb">
							<pre><code class="language-scss" data-lang="scss"><span class="k">@media</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-xs-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-sm-min</span><span class="p">)</span> <span class="nf">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-sm-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-md-min</span><span class="p">)</span> <span class="nf cc_cursor">and</span> <span class="p">(</span><span class="n">max-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-md-max</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span>
							<span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="o">@</span><span class="n">screen-lg-min</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre>
						</figure>
						<h2 id="grid-options">栅格参数</h2>
						<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
								<thead>
									<tr>
										<th></th>
										<th>
											超小屏幕
											<small>手机 (&lt;768px)</small>
										</th>
										<th>
											小屏幕
											<small>平板 (≥768px)</small>
										</th>
										<th>
											中等屏幕
											<small>桌面显示器 (≥992px)</small>
										</th>
										<th>
											大屏幕
											<small>大桌面显示器 (≥1200px)</small>
										</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<th class="text-nowrap" scope="row">栅格系统行为</th>
										<td>总是水平排列</td>
										<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row"><code>.container</code> 最大宽度</th>
										<td>None （自动）</td>
										<td>750px</td>
										<td>970px</td>
										<td>1170px</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">类前缀</th>
										<td><code>.col-xs-</code></td>
										<td><code>.col-sm-</code></td>
										<td><code>.col-md-</code></td>
										<td><code>.col-lg-</code></td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">列（column）数</th>
										<td colspan="4">12</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">最大列（column）宽</th>
										<td class="text-muted">自动</td>
										<td>~62px</td>
										<td>~81px</td>
										<td>~97px</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">槽（gutter）宽</th>
										<td colspan="4">30px （每列左右均有 15px）</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">可嵌套</th>
										<td colspan="4">是</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">偏移（Offsets）</th>
										<td colspan="4">是</td>
									</tr>
									<tr>
										<th class="text-nowrap" scope="row">列排序</th>
										<td colspan="4">是</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div id="side" class="col-md-3" role="complementary">
				<nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top">
					<ul class="nav bs-docs-sidenav">
						<li class="li">
							<a href="#overview">概览</a>
							<ul class="nav">
								<li class=""><a href="#overview-doctype">HTML5 文档类型</a></li>
								<li class=""><a href="#overview-mobile">移动设备优先</a></li>
								<li><a href="#overview-type-links">排版与链接</a></li>
								<li><a href="#overview-normalize">Normalize.css</a></li>
								<li><a href="#overview-container">布局容器</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#grid">栅格系统</a>
							<ul class="nav">
								<li><a href="#grid-intro">简介</a></li>
								<li><a href="#grid-media-queries">媒体查询</a></li>
								<li><a href="#grid-options">栅格参数</a></li>
								<li><a href="#grid-example-basic">实例：从堆叠到水平排列</a></li>
								<li><a href="#grid-example-fluid">实例：流式布局容器</a></li>
								<li><a href="#grid-example-mixed">实例：移动设备和桌面屏幕</a></li>
								<li><a href="#grid-example-mixed-complete">实例：手机、平板、桌面</a></li>
								<li><a href="#grid-example-wrapping">实例：多余的列（column）将另起一行排列</a></li>
								<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
								<li><a href="#grid-offsetting">列偏移</a></li>
								<li><a href="#grid-nesting">嵌套列</a></li>
								<li><a href="#grid-column-ordering">列排序</a></li>
								<li><a href="#grid-less">Less mixin 和变量</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#type">排版</a>
							<ul class="nav">
								<li><a href="#type-headings">标题</a></li>
								<li><a href="#type-body-copy">页面主体</a></li>
								<li><a href="#type-inline-text">内联文本元素</a></li>
								<li><a href="#type-alignment">对齐</a></li>
								<li><a href="#type-transformation">改变大小写</a></li>
								<li><a href="#type-abbreviations">缩略语</a></li>
								<li><a href="#type-addresses">地址</a></li>
								<li><a href="#type-blockquotes">引用</a></li>
								<li><a href="#type-lists">列表</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#code">代码</a>
							<ul class="nav">
								<li><a href="#code-inline">内联代码</a></li>
								<li><a href="#code-user-input">用户输入</a></li>
								<li><a href="#code-block">基本代码块</a></li>
								<li><a href="#code-variables">变量</a></li>
								<li><a href="#code-sample-output">程序输出</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#tables">表格</a>
							<ul class="nav">
								<li><a href="#tables-example">基本实例</a></li>
								<li><a href="#tables-striped">条纹状表格</a></li>
								<li><a href="#tables-bordered">带边框的表格</a></li>
								<li><a href="#tables-hover-rows">鼠标悬停</a></li>
								<li><a href="#tables-condensed">紧缩表格</a></li>
								<li><a href="#tables-contextual-classes">状态类</a></li>
								<li><a href="#tables-responsive">响应式表格</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#forms">表单</a>
							<ul class="nav">
								<li><a href="#forms-example">基本实例</a></li>
								<li><a href="#forms-inline">内联表单</a></li>
								<li><a href="#forms-horizontal">水平排列的表单</a></li>
								<li><a href="#forms-controls">被支持的控件</a></li>
								<li><a href="#forms-controls-static">静态控件</a></li>
								<li><a href="#forms-control-focus">焦点状态</a></li>
								<li><a href="#forms-control-disabled">禁用状态</a></li>
								<li><a href="#forms-control-readonly">只读状态</a></li>
								<li><a href="#forms-help-text">Help text</a></li>
								<li><a href="#forms-control-validation">校验状态</a></li>
								<li><a href="#forms-control-sizes">控件尺寸</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#buttons">按钮</a>
							<ul class="nav">
								<li><a href="#buttons-tags">可作为按钮使用的标签或元素</a></li>
								<li><a href="#buttons-options">预定义样式</a></li>
								<li><a href="#buttons-sizes">尺寸</a></li>
								<li><a href="#buttons-active">激活状态</a></li>
								<li><a href="#buttons-disabled">禁用状态</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#images">图片</a>
							<ul class="nav">
								<li><a href="#images-responsive">响应式图片</a></li>
								<li><a href="#images-shapes">图片形状</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#helper-classes">辅助类</a>
							<ul class="nav">
								<li><a href="#helper-classes-colors">情境文本颜色</a></li>
								<li><a href="#helper-classes-backgrounds">情境背景色</a></li>
								<li><a href="#helper-classes-close">关闭按钮</a></li>
								<li><a href="#helper-classes-carets">三角符号</a></li>
								<li><a href="#helper-classes-floats">快速浮动</a></li>
								<li><a href="#helper-classes-center">让内容块居中</a></li>
								<li><a href="#helper-classes-clearfix">清除浮动</a></li>
								<li><a href="#helper-classes-show-hide">显示或隐藏内容</a></li>
								<li><a href="#helper-classes-screen-readers">屏幕阅读器和键盘导航</a></li>
								<li><a href="#helper-classes-image-replacement">图片替换</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#responsive-utilities">响应式工具</a>
							<ul class="nav">
								<li><a href="#responsive-utilities-classes">可用的类</a></li>
								<li><a href="#responsive-utilities-print">打印类</a></li>
								<li><a href="#responsive-utilities-tests">测试用例</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#less">使用 Less</a>
							<ul class="nav">
								<li><a href="#less-bootstrap">编译 Bootstrap</a></li>
								<li><a href="#less-variables">变量</a></li>
								<li><a href="#less-mixins-vendor">针对特定厂商的 mixin</a></li>
								<li><a href="#less-mixins-utility">工具 mixin</a></li>
							</ul>
						</li>
						<li class="li">
							<a href="#sass">使用 Sass</a>
							<ul class="nav">
								<li><a href="#sass-contents">包含的内容</a></li>
								<li><a href="#sass-installation">安装</a></li>
							</ul>
						</li>


					</ul>
					<a href="#top" class="back-to-top">
						返回顶部
					</a>

					<a class="bs-docs-theme-toggle" role="button">
						主题预览
					</a>

				</nav>
			</div>
		</div>
	</div>
	<script src="bootstrap/js/jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script>
		$(".bs-docs-sidenav .li a").on("click", function () {
			$(this).parent().addClass("active").siblings().removeClass("active")
			$(this).parent().on("blur", function () {
				$(".li .nav li a").removeClass("active")
			})
		})

		$(".li .nav li a").on("click", function () {
			$(this).addClass("active").siblings().removeClass("active")
		})
		$(window).scroll(function () {
			if ($(window).scrollTop() > 300) {
				$("#side nav").addClass("affix")
			} else {
				$("#side nav").removeClass("affix")
			}
			if ($(window).scrollTop() == 0) {
				$("#side nav").addClass("affix-top")
				$(".bs-docs-sidenav li").removeClass("active")
			}
		})

	</script>
</body>

</html>